<template>
    <div id="home">

        <nav-bar class="home-nav">
            <template v-slot:center>购物车</template>
        </nav-bar>
        <tab-control @tabClick="handleTabClick"
                     :titles="['流行','新款','精选']"
                     ref="tabControlTopped"
                     v-show="tabControlFixedFlag">
        </tab-control>
        <scroll class="home-scroll"
                ref="scroll"
                :probe-type="3"
                :pull-up-load="true"
                @scroll="handleContentScroll"
                @pullingUp="handleContentPullingUp">
            <home-swiper class="home-swiper"
                         :banners="banners"
                         @swiperImageLoaded="handleSwiperImageLoaded">
            </home-swiper>
            <home-recommend :recommends="recommends"></home-recommend>
            <home-feature></home-feature>
            <tab-control @tabClick="handleTabClick"
                         :titles="['流行','新款','精选']"
                         ref="tabControl">
            </tab-control>

            <goods-list :goods="showGoods">
            </goods-list>
        </scroll>
        <back-top @click.native="handleBackTopClick"
                  v-show="showBackTop"></back-top>

    </div>
</template>
<script>
import NavBar from '../../components/common/navbar/NavBar';
import TabControl from '../../components/content/tabControl/TabControl';
import GoodsList from '../../components/content/goods/GoodsList';
import Scroll from '../../components/common/scroll/Scroll';
import BackTop from '../../components/common/backTop/BackTop';

import HomeSwiper from './childComps/HomeSwiper';
import HomeRecommend from './childComps/HomeRecommend';
import HomeFeature from './childComps/HomeFeature';

import { getHomeMultidata, getHomeGoods } from '../../network/home'


export default {
    name: "Home",
    components: {
        NavBar,
        HomeSwiper,
        HomeRecommend,
        HomeFeature,
        TabControl,
        GoodsList,
        Scroll,
        BackTop
    },
    data () {
        return {
            banners: [],
            recommends: [],
            goods: {
                'pop': { page: 0, list: [] },
                'new': { page: 0, list: [] },
                'sell': { page: 0, list: [] }
            },
            currentGoodsType: 'pop',
            showBackTop: false,
            tabControlOffsetTop: 0,
            tabControlFixedFlag: false,
        }
    },
    computed: {
        showGoods () {
            return this.goods[this.currentGoodsType].list;
        },
    },
    created () {
        this.getMultidata();
        this.getGoods('pop');
        this.getGoods('new');
        this.getGoods('sell');

    },
    methods: {
        /**
         * 网络请求相关方法
         */
        getMultidata: function () {
            getHomeMultidata().then((res) => {
                this.banners = res.data.banner.list;
                this.recommends = res.data.recommend.list;

            });
        },
        getGoods: function (type) {
            let page = this.goods[type].page + 1;
            getHomeGoods(type, page).then(res => {
                this.goods[type].page++;
                this.goods[type].list.push(...res.data.list);
            });
        },
        loadMoreGoods: function () {
            this.getGoods(this.currentGoodsType)
        },
        /**
         * 事件监听相关方法
         */
        handleTabClick: function (index) {
            switch (index) {
                case 0:
                    this.currentGoodsType = 'pop';
                    break;
                case 1:
                    this.currentGoodsType = 'new';
                    break;
                case 2:
                    this.currentGoodsType = 'sell';
                    break;
            }
            this.$refs.tabControl.currentItemIndex = index;
            this.$refs.tabControlTopped.currentItemIndex = index;
        },
        handleBackTopClick: function (event) {
            /**
             * 在scroll组件中使用了ref命名，可以拿到该组件的实例
             * scrollEl.scroll是data中的属性，对应是BScroll实例，调用其中的scrollTo方法
             */
            let scrollEl = this.$refs.scroll;
            scrollEl.scrollTo(0, 0);
        },
        handleContentScroll: function (position) {
            //1.判断backtop按钮的显示
            Math.abs(position.y) > 1000 ? (this.showBackTop = true) : (this.showBackTop = false);
            //2.判断tabControl是否吸顶
            this.tabControlFixedFlag = Math.abs(position.y) > this.tabControlOffsetTop;
        },
        handleContentPullingUp: function () {
            this.loadMoreGoods();
            let scrollEl = this.$refs.scroll;
            scrollEl.finishPullUp();
        },
        handleSwiperImageLoaded: function () {
            this.tabControlOffsetTop = this.$refs.tabControl.$el.offsetTop;
        }
    }
}
</script>
<style scoped>
#home {
    margin-bottom: 60px;
    /* position: relative; */
}
.home-nav {
    background-color: red;
    /* 用:root在base.css声明了全局变量 
            --color-tint
        */
    background-color: var(--color-tint);
    color: #fff;
    width: 100%;
}

.home-scroll {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 49px;
    overflow: hidden;
}
.tabControlFixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;
}
/* .home-scroll {
    height: calc(100% - 93px);
    overflow: hidden;
    margin-top: 44px;
} */
</style>